<template>
    <el-dialog :visible.sync="showAddModal" :append-to-body="true"
               :close-on-click-modal="false" width="50%"
               :close-on-press-escape="false" :show-close="false" class="ele-modal"
               :modal-append-to-body='false'>
        <h4 slot="title">{{data.goodsName}}</h4>
        <div class="product-detail-modal">
            <div class="approve-detail-modal-title">
                <h2>商品详情</h2>
            </div>
            <ul class="bill-tips clearfix">
                <li style="width: 15%;" v-for="item in data.goodsPicList">
                    <img style="height: 80px;width: 80px;margin-bottom: 6px;margin-top: 6px;float: left;"
                         :src="item.pic">
                </li>
            </ul>
            <div>
                <h3 class="panel-title">基本信息 </h3>
            </div>
            <el-row>
                <ul class="bill-tips clearfix">
                    <li>
                        <em>商品名称</em>
                        <span>{{data.goodsName}}</span>
                    </li>
                    <li>
                        <em>商品分类</em>
                        <span>{{data.categoryName}}</span>
                    </li>
                    <li>
                        <em>单位</em>
                        <span>{{data.specsName}}</span>
                    </li>
                </ul>
            </el-row>
            <div>
                <h3 class="panel-title">商品属性</h3>
            </div>
            <ul class="bill-tips clearfix">
                <li>
                    <em>型号</em>
                    <span v-if="!$isNullObj(data.property)">{{data.property.model}}</span>
                </li>
                <li>
                    <em>品牌</em>
                    <span v-if="!$isNullObj(data.property)">{{data.property.brand}}</span>
                </li>
                <li>
                    <em>颜色</em>
                    <span v-if="!$isNullObj(data.property)">{{data.property.color}}</span>
                </li>
                <li>
                    <em>规格</em>
                    <span v-if="!$isNullObj(data.property)">{{data.property.specifications}}</span>
                </li>
                <li>
                    <em>存储条件</em>
                    <span v-if="!$isNullObj(data.property)">{{data.property.storageCondition}}</span>
                </li>
            </ul>
            <div>
                <h3 class="panel-title">附加信息 </h3>
            </div>
            <ul class="bill-tips clearfix">
                <li>
                    <em>生产商</em>
                    <span v-if="!$isNullObj(data.property)">{{data.property.manuFacturer}}</span>
                </li>
                <li>
                    <em>保质期</em>
                    <span v-if="!$isNullObj(data.property)">{{data.property.qualityGuaranteePeriod}}</span>
                </li>
                <li>
                    <em>生产日期</em>
                    <span v-if="!$isNullObj(data.property)">{{data.property.manuFactureDate}}</span>
                </li>
                <li>
                    <em>出产地</em>
                    <span v-if="!$isNullObj(data.property)">{{data.property.provinceName}}{{data.property.cityName}}{{data.property.districtName}}</span>
                </li>
                <li class="w-100">
                    <em>所在街道/村落</em>
                    <span v-if="!$isNullObj(data.property)">{{data.property.streetName}}</span>
                </li>
                <li class="w-100">
                    <em>注意事项</em>
                    <span v-if="!$isNullObj(data.property)">{{data.property.attention}}</span>
                </li>
                <li class="w-100">
                    <em>说明</em>
                    <span v-if="!$isNullObj(data.property)">{{data.property.information}}</span>
                </li>
            </ul>
            <div>
                <h3 class="panel-title">价格信息</h3>
            </div>
            <ul class="bill-tips clearfix">
                <li>
                    <em>零售价格</em>
                    <span class="amount" v-if="!$isEmptyStr(data.price)">{{data.price}}元</span>
                </li>
                <li>
                    <em>促销价格</em>
                    <span class="amount" v-if="!$isEmptyStr(data.promotionPrice)">{{data.promotionPrice}}元</span>
                </li>
            </ul>
            <div>
                <h3 class="panel-title">库存信息</h3>
            </div>
            <ul class="bill-tips clearfix">
                <li>
                    <em>库存数量</em>
                    <span class="amount" v-if="!$isEmptyStr(data.stock)">{{data.stock}}{{data.specsName}}</span>
                </li>
            </ul>
            <div>
                <h3 class="panel-title">其他信息 </h3>
            </div>
            <ul class="bill-tips clearfix">
                <li>
                    <em>展出状态</em>
                    <span class="text-navy" v-if='data.status===0'>下架</span>
                    <span class="text-navy" v-if='data.status===1'>上架</span>
                </li>
                <li>
                    <em>促销状态</em>
                    <i class="el-icon-close" style="color:#F00;"
                       v-if="data.isRecommend === 0"></i>
                    <i class="el-icon-check" style="color:#1ab394;"
                       v-if="data.isRecommend === 1"></i>
                </li>
            </ul>
            <div>
                <h3 class="panel-title">描述 </h3>
            </div>
            <div class="quill-code">
                <div style="padding-left: 20px" v-html='data.describe'></div>
            </div>
        </div>
        <div slot="footer" class="row" style="text-align: right;margin-right: 5px;">
            <a class="revision-btn" href="javaScript:void(0)" @click="onCancel">确 定</a>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "viewProductModal",
        props: {
            showAddModal: {
                type: Boolean,
                default: false
            },
            goodsId: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                modalLabel: '商品详情',
                formLabelWidth: '100px',
                data: {}
            }
        },
        mounted: function () {
        },
        methods: {
            onCancel() {
                this.$emit('onCancelNewModal');
            },
            async getInfo(id) {
                let res = await this.$api.get('/mall/goods/info/' + id, {});
                if (res.code === 0) {
                    this.data = res.goods;
                } else {
                    this.$message.error(res.msg);
                }
            },

            mounted() {
            },
        }
    }
</script>

<style scoped>
    .product-detail-modal {
        font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 12px;
        color: #676a6c;
    }

    .ele-modal /deep/ .el-dialog__header {
        border-bottom: 1px solid #e5e5e5;
        padding: 5px 0 2px 15px !important;
    }

    .ele-modal /deep/ .el-dialog__body {
        padding: 0 20px 30px 20px;
    }

    .ele-modal /deep/ .el-dialog__footer {
        border-top: 1px solid #e5e5e5;
        padding: 15px;
    }

</style>
